<!--
 * @Author: xfworld
 * @Date: 2020-06-10 15:26:04
 * @LastEditors: xfworld
 * @LastEditTime: 2020-06-11 17:10:03
 * @Description:
-->
<template>
  <div class="scanner">
    <van-nav-bar title="B2C还库" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row type="flex" justify="center">
      <van-col span="24">
        <van-form class="common-form">
          <van-field
            v-model="formItem.sku"
            ref="sku"
            id="sku"
            name="商品"
            type="number"
            label="商品"
            placeholder="商品"
            @keyup.enter.native="searchSkuData"
            @focus="skuFocusClick"
            @click="skuFocusClick"
            :readonly="skuReadOnly"
            :rules="[{required: true, message: '请扫描商品'}]"
          />
          <van-field
            v-model="formItem.locationCode"
            ref="locationCode"
            id="locationCode"
            name="库位"
            label="库位"
            placeholder="库位"
            @keyup.enter.native="searchLocationCodeData"
            @focus="locationCodeFocusClick"
            @click="locationCodeFocusClick"
            :readonly="locationCodeReadOnly"
            :rules="[{required: true, message: '请扫描库位'}]"
          />
        </van-form>
      </van-col>
    </van-row>
    <div style="text-align: center;">
      <span style="font-size: 16px;font-weight: bold;" ref="successNum"></span>
    </div>
    <van-overlay :show="showOverlay">
      <div class="wrapper">
        <van-loading size="34px" vertical>加载中...</van-loading>
      </div>
    </van-overlay>
    <van-overlay :show="showMsgOverlay" @click="showMsgOverlay = false">
      <div class="wrapper">
        <div class="msgTxt">{{ showMsg }}</div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {getSkuPdaData, saveLocationPdaData} from "@/api/returnWarehouse/returnWarehouse.js";
export default {
  name: "b2cReturnWarehouse",
  computed: {
    ...mapGetters("scanner", ["pdaScanData"])
  },
  watch: {
    pdaScanData: {
      handler(data) {
        let input = document.activeElement.id;
        if (input == "sku") {
          this.formItem.sku = data.data;
          this.searchSkuData();
        } else if (input == "locationCode") {
          this.formItem.locationCode = data.data;
          this.searchLocationCodeData();
        }
      },
      deep: true
    }
  },
  created() {
    this.skuFocus();
  },
  data() {
    return {
      formItem: {
        sku: "",
        locationCode: ""
      },
      showOverlay: false,
      showMsgOverlay: false,
      showMsg: "",
      skuReadOnly: false,
      locationCodeReadOnly: false
    };
  },
  methods: {
    searchSkuData() {
      if (this.formItem.sku == "") {
        this.$toast.fail("商品不能为空");
        this.skuFocus();
      } else {
        //判断是否未13位数字
        if (this.formItem.sku.length == 13) {
          getSkuPdaData(this.formItem.sku).then(response => {
            if (response.data.status) {
              let pageData = response.data.data;
              //返回件数
              this.$refs.successNum.textContent = "待还库数量：" + (pageData.sum - pageData.wait) + "  已还库数量：" + pageData.wait;
              this.locationCodeFocus();
            } else {
              this.msgShowTime(response.data.message);
              this.skuFocus();
              this.formItem.sku = "";
            }
          });
        } else {
          this.$toast.fail("商品信息为13为数字，请检查是否扫描信息是否准确");
          this.formItem.sku = "";
        }
      }
    },
    searchLocationCodeData() {
      if (this.formItem.locationCode == "") {
        this.$toast.fail("库位不能为空");
        this.locationCodeFocus();
      } else {
        this.showOverlay = true;
        saveLocationPdaData(this.formItem.sku, this.formItem.locationCode).then(response => {
          if (response.data.status) {
            let pageData = response.data.data;
            this.msgShowTime(response.data.message);
            this.skuFocus();
            if (pageData.sum != "0") {
              //返回件数
              this.$refs.successNum.textContent = "待还库数量：" + (pageData.sum - pageData.wait) + "  已还库数量：" + pageData.wait;
            } else {
              this.$refs.successNum.textContent = "";
            }
            this.formItem.sku = "";
          } else {
            this.msgShowTime(response.data.message);
            this.locationCodeFocus();
          }
          this.formItem.locationCode = "";
          this.showOverlay = false;
        });
      }
    },
    skuFocus() {
      this.$nextTick(() => {
        this.$refs["sku"].focus();
      });
    },
    locationCodeFocus() {
      this.$nextTick(() => {
        this.$refs["locationCode"].focus();
      });
    },
    skuFocusClick() {
      this.skuReadOnly = true;
      setTimeout(() => {
        this.skuReadOnly = false;
      }, 200);
    },
    locationCodeFocusClick() {
      this.locationCodeReadOnly = true;
      setTimeout(() => {
        this.locationCodeReadOnly = false;
      }, 200);
    },
    onClickLeft() {
      this.$router.push({
        name: "homeIndex"
      });
    },
    msgShowTime(msg) {
      this.showMsg = msg;
      this.showMsgOverlay = true;
      setTimeout(() => {
        this.showMsgOverlay = false;
      }, 3000);
    }
  }
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-loading--vertical .van-loading__text {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}
.msgTxt {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}
</style>
